<!--  -->
<template>
<div>
  <div class="index">
      <!-- 左侧导航 -->
<div class="nav">
    <ul>
        <li>
            <router-link to="/faxian">发现音乐</router-link>
        </li>
        <li>
             <router-link to="/tuijian">推荐歌单</router-link>
        </li>
        <li>
            <router-link to="/zuixin"> 最新音乐</router-link>
         </li>
        <li>
            <router-link to="/zuixinmv">最新mv</router-link>
        </li>
    </ul>
</div>
<!-- 右侧容器 -->
<div class="main">
    
    <!-- 路由的出口 地址命中后 把组件显示的地方 -->
    <router-view></router-view>
</div>


  </div>
  <div class="player">
    <audio :src="musicUrl" controls autoplay></audio>

</div>
</div>
</template>

<script>
// import faxian from './faxian.vue'
export default {
//   components:{
//       faxian:faxian
//   }
name:'index',
data(){
    return{
         musicUrl:"http://m8.music.126.net/20200908163328/c5ad5f84af6746cba9333c58bc94c4b5/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/3846037497/0cae/3b23/1b70/928d1e4d28f2593ff1eb33d045f99b19.mp3"

    }
}
  
}

</script>
<style>
 .index{
     display: flex;
     height:100%;
 }
 .index .nav{
     width: 200px;

 }
 .index .nav ul li{
     text-align: center;
     margin: 10px;
    list-style-type:none;
 }
  
 .index .main{
     background: red;
     flex: 1;
 }
 a{
     color: orangered;
     text-decoration: none;
 }
 a.router-link-active{
     color: orange;
 }
 .player{
     display: flex;
 justify-content: center;
     height: 60px;
     background: red;
 }

</style>